<!--
 * @Author: your name
 * @Date: 2022-04-13 17:03:07
 * @LastEditTime: 2022-04-13 18:12:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \trace-source-web\src\views\trace-source-manage\components\productionTraceabilitythree\components\growing-img copy.vue
-->
<template>
  <!-- 生长数据 -->
  <el-card v-if="!growStatus" id="growing" class="box-card">
    <div slot="header" class="clearfix">
      <span>检测报告 QUALITY INSPECTION REPORT</span>
    </div>
    <div class="honorary">
      <el-button
        class="prev"
        type="text"
        @click="prev()"
      ><i class="el-icon-arrow-left"></i></el-button>
      <el-carousel
        ref="grofix"
        :loop="true"
        :interval="4000"
        indicator-position="none"
        type="card"
        arrow="never"
        :autoplay="true"
      >
        <el-carousel-item
          v-for="(item, index) in growthlist"
          :key="index"
          v-loading="loading"
        >
          <img :src="'data:image/png;base64,' + item.pictureData" alt="" />
        </el-carousel-item>
      </el-carousel>
      <el-button
        class="next"
        type="text"
        @click="next()"
      ><i class="el-icon-arrow-right"></i></el-button>
    </div>
  </el-card>
</template>

<script>
import graApi from "@/api/trace-source-web/production-api/index-primary.js"

export default {
  props: {
    batId: {
      type: [Number, String],
      default: () => ''
    },
    startTime: {
      type: [Number, String],
      default: () => ""
    },
    endTime: {
      type: [Number, String],
      default: () => ""
    }
  },
  data() {
    return {
      growthlist: [],
      batchNo: "",
      selectedpicdata: "",
      dialogFormVisible: false,
      growthPage: 1,
      databaseName: "",
      totalPages: 0,
      loading: false,
      Environmentlist: [],
      growStatus: true
    };
  },
  watch: {
    startTime: {
      handler(val) {
        this.getgrowthdata()
      }
    }
  },
  mounted() {
    this.batchNo = this.batId;
    // setTimeout(() => {
    //   this.getgrowthdata();
    // }, 200);
    this.getgrowthdata()
  },
  methods: {
    // 检测报告
    getgrowthdata() {
      graApi.getDetectionReport(this.batId).then(res => {
        this.loading = true;
        let list = [];
        if (res.data) {
          list = res.data;
        }
        this.growthlist = list;
        this.loading = false
        if (this.growthlist.length > 0) {
          this.growStatus = false
        } else {
          this.growStatus = true
        }
      })
    },
    // 跑马灯左右切换
    prev() {
      this.$refs.grofix.prev();
    },
    next() {
      this.$refs.grofix.next();
    }
  }
};
</script>
<style lang="scss" scoped>
#growing {
  .el-input {
    margin-left: 10px;
    width: 50%;
    ::v-deep .el-input__inner {
      border: 0;
      height: 25px;
      background-color: rgba($color: #0e4352, $alpha: 1);
      border-radius: 40px;
      text-align: center;
    }
  }
  ::v-deep .el-carousel {
    // padding: 10px;
    padding-top: 10px;
    width: 90%;
    .el-carousel__container {
      // background-color: rgba(0,57,71,0.55);
      height: 560px;
      .el-carousel__mask {
        background-color: #ffffff00;
      }
      .el-carousel__item {
        display: flex;
        align-items: center;
      justify-content: center
      }
    }
  }
  ::v-deep .el-card__body {
    padding: 10px !important;
    // padding-bottom: 10px !important;
    > p {
      margin-left: 20px;
      font-size: 22px;
    }
  }
}

.honorary {
  width: 100%;
  height: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  background: #0f4656;
  align-items: center;
  img {
    width: 70%;
    height: 85%;
    margin:  0 auto;
  }
}
.next {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}
.prev {
  padding-bottom: 30px;
  i {
    font-size: 80px;
    color: #fff;
  }
}

.prev:hover,
.next:hover {
  i {
    color: #409eff;
  }
}
</style>
